<!-- 选项卡组件 -->
<template>
  <div class='tableComponent'>
    <nav class="nav-1" v-if="option && option['styleState'] === 1" v-bind="option['props']">
      <span class="nav-item-1" v-for="(item,index) in option['children']" :key="index"
        :class="{ 'active-1' : item.active }" v-bind="item['props']" v-on="item['methods']"
        @click="ItemCileck($event,index)">
        {{ item.name }}
      </span>
    </nav>

    <nav class="nav-2" v-if="option && option['styleState'] === 2" v-bind="option['props']">
      <div class="nav-item-wrap" v-for="(item,index) in option['children']" :key="index" v-bind="item['props']"
        v-on="item['methods']" @click="ItemCileck($event,index)">
        <span class="nav-item-2" :class="{ 'active-2' : item.active }"> {{ item.name }} </span>
      </div>
    </nav>

    <nav class="nav-3" v-if="option && option['styleState'] === 3" v-bind="option['props']">
      <span class="nav-item-3" v-for="(item,index) in option['children']" :key="index"
        :class="{ 'active-3' : item.active }" v-bind="item['props']" v-on="item['methods']"
        @click="ItemCileck($event,index)">
        {{ item.name }}
      </span>
    </nav>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  export default {
    name: 'tableComponent',
    props: ['option'],
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {};
    },
    created() {
      if (!this.option) {
        return console.log("%c 警告:选项卡组件缺少option传入", "color: red");
      }

      if (!this.option['children']) {
        return console.log("%c 警告:option缺少children传入", "color: red");
      }

      if (!this.option['styleState']) {
        this.$set(this.option, 'styleState', 1)
      }

      let children = this.option.children;
      let item;
      let kind;

      for (let i in children) {
        item = children[i];
        if (i == 0) {
          kind = true;
        } else {
          kind = false;
        }

        // 添加默认值  不能直接xxx[] 这样添加属性 因为会无法同步数据
        this.$set(item, 'active', kind)
      }
    },
    //方法集合
    methods: {
      ItemCileck(e, index) {
        let children = this.option.children;
        let item;
        for (let i in children) {
          item = children[i];
          if (i == index) {
            item['active'] = true;
          } else {
            item['active'] = false;
          }
        }

        this.option.children = children;
      }
    },
  }

</script>
<style lang='scss' scoped>
  .tableComponent {
    background: #fff;

    .nav-1 {
      display: flex;
      align-items: center;
      height: 100px;

      .nav-item-1 {
        height: 100%;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        color: #333;
        font-size: 15px;
        border-bottom: 2px solid transparent;
      }

      .active-1 {
        color: #3b9bff;
        border-bottom-color: #3b9bff;
      }
    }

    .nav-2 {
      display: flex;
      height: 50px;
      align-items: center;
      justify-content: center;
      padding: 0 15px;

      .nav-item-wrap {
        display: flex;
        flex: 1;
        .nav-item-2 {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          padding: 0 8px;
          color: #333;
          white-space: pre;
          font-size: 15px;
          border-radius: 10px;
          border-bottom: 2px solid transparent;
        }

        .active-2 {
          color: #fff;
          background-color: #3b9bff;
        }
      }
    }

    .nav-3 {
      display: flex;
      height: 50px;
      overflow-x: auto;
      align-items: center;
      white-space: nowrap;

      .nav-item-3 {
        display: flex;
        align-items: center;
        padding: 0 8px;
        color: #333;
        font-size: 15px;
        border-radius: 10px;
        white-space: pre;
        border-bottom: 2px solid transparent;
        margin-left: 12px;

        &:last-child {
          margin-right: 12px;
        }
      }

      .active-3 {
        color: #fff;
        background-color: #3b9bff;
      }
    }
  }

</style>
